<template>
    <div class="proDetails">
      <ul class="content">
        <li v-for="item in listData"　@click="toIntroduce">{{item.title}}<i class="iconfont" :class="item.Icon"></i></li>
      </ul>
     <Pages></Pages>
    </div>
</template>
<script>
  import Banner from "../.././components/banner.vue"
  import Pages  from '../../components/pages.vue'
  export default{
    name:"proDetails",
    components:{
      Banner,
      Pages
    },
    data(){
      return {
        listData:[
          {
              title:"西裤口袋1",
              Icon:"icon-bangzhuzhongxin-tuwen"
          },
          {
            title:"西裤脚扣外翻硗",
            Icon:"icon-bangzhuzhongxin-shipin"
          },
          {
            title:"西裤口袋2",
            Icon:"icon-bangzhuzhongxin-fujian"
          },
          {
            title:"无褶裤",
            Icon:"icon-bangzhuzhongxin-tuwen"
          },
          {
            title:"西裤箭头，钉扣与挂钩",
            Icon:"icon-bangzhuzhongxin-shipin"
          },
          {
            title:"西裤口袋1",
            Icon:"icon-bangzhuzhongxin-tuwen"
          },
          {
            title:"西裤脚扣外翻硗",
            Icon:"icon-bangzhuzhongxin-shipin"
          },
          {
            title:"西裤口袋2",
            Icon:"icon-bangzhuzhongxin-fujian"
          },
          {
            title:"无褶裤",
            Icon:"icon-bangzhuzhongxin-tuwen"
          },
          {
            title:"西裤箭头，钉扣与挂钩",
            Icon:"icon-bangzhuzhongxin-shipin"
          },
          {
            title:"西裤口袋1",
            Icon:"icon-bangzhuzhongxin-tuwen"
          },
          {
            title:"西裤脚扣外翻硗",
            Icon:"icon-bangzhuzhongxin-shipin"
          },
          {
            title:"西裤口袋2",
            Icon:"icon-bangzhuzhongxin-fujian"
          },
          {
            title:"无褶裤",
            Icon:"icon-bangzhuzhongxin-tuwen"
          },
          {
            title:"西裤箭头，钉扣与挂钩",
            Icon:"icon-bangzhuzhongxin-shipin"
          }
        ]
      }
    },
    methods:{
      toIntroduce(){
          this.$router.push("introduce")
      }
    }
  }
</script>
<style scoped>
.proDetails{
  background: #fff;
  margin-left: 20px;
  border-radius: 20px;
  padding-bottom: 110px;
}
.proDetails>.content{
  text-align: left;
  padding-top: 10px;
  margin: 0 20px;
}
.proDetails>.content>li{
  width:860px;
  height:50px;
  line-height:50px;
  font-size: 14px;
  color:#464c5b;
  border-bottom: 1px dashed #e3e8ee;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  }
.proDetails>.content>li>i{
  font-size:16px;
  color:#9ea7b4;
  margin-left: 15px;
}
</style>

